<template>
  <div>
    <Table border ref="selection" :columns="columns4" :data="data1"></Table>
                        <Button @click="handleSelectAll(true)">Set all selected</Button>
                        <Button @click="handleSelectAll(false)">Cancel all selected</Button>
                        <Page :total="100"></Page>
    <router-link to="/list1">to list1</router-link>
    <input type="button" @click=show value="click me">
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        }
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ]
    };
  },
  methods: {
    show: function() {
      M5.open("NormalForm");
    },
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    }
  },
  mounted: function() {
    console.log(
      M5.test({
        name: "troy",
        age: 1,
        money: 12.5,
        array: [1, 2, 3],
        tt: "1985-5-23",
        userList: [{ name: "troy1", age: 1 },{ name: "troy2", age: 2 }]
      })
    );
  }
};
</script>
